<template>
  <scroll-view @scrolltolower="refreshLoadPage(globalLocation)" :scroll-y="true" class="page scroll-container">
    <view class="rol" :style="{ paddingBottom: `${safeArea.bottom}px` }">
      <shop-for-display v-for="(shop, index) in pageInfo.list" :key="index" :shop-info="shop" />
      <view class="list-bottom">
        <template v-if="pageInfo.total !== 0">
          <view class="no-more" v-if="isNoMore">
            <image class="image" src="@/static/image/shop-collect/no-more.svg" />
            <text>没有更多了~</text>
          </view>
          <view class="loading" v-else>
            <text>正在加载中...</text>
          </view>
        </template>
        <view class="empty-collect" v-else>
          <image class="image" src="@/static/image/shop-collect/empty-collect.svg" />
          <text>您还没有收藏店铺哦~</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import $API from '@/api'
import { computed, ref, watch } from 'vue'
import ShopForDisplay from '@/components/shop-for-display/index.vue'
import { $modal } from '@/plugins'
import $store from '@/store'
const globalLocation = ref($store.user.positionStore.globalLocation)
const { safeArea } = $store.app.getSystemParam()
const isLoading = ref(false)
const isNoMore = computed(() => {
  return pageInfo.value.total > 0 && pageInfo.value.currentPage >= pageInfo.value.total / pageInfo.value.pageSize
})
const pageInfo = ref({
  currentPage: 0,
  pageSize: 10,
  total: -1,
  list: [] as any[]
})
watch(
  () => globalLocation.value,
  (lngLatDetail) => {
    if (lngLatDetail != null) refreshLoadPage(lngLatDetail)
  },
  { immediate: true }
)

// 请求页数据-只由refreshLoadPageSyncWrapper方法调用
async function refreshLoadPage(lngLatDetail: { latitude: number; longitude: number }, resetPage: boolean = false) {
  if (
    lngLatDetail == null ||
    lngLatDetail.longitude == null ||
    lngLatDetail.latitude == null ||
    isLoading.value ||
    isNoMore.value
  )
    return
  isLoading.value = true
  try {
    if (resetPage) {
      pageInfo.value.currentPage = 1
      pageInfo.value.list = []
      pageInfo.value.total = -1
    }
    const result = await $API.shopCollect.getAllFollow({
      currentPage: pageInfo.value.currentPage + 1,
      pageSize: pageInfo.value.pageSize,
      latitude: lngLatDetail.latitude,
      longitude: lngLatDetail.longitude
    })
    if (!result.success) {
      $modal.toastMsg('请求页数据失败~')
      return
    }
    if (resetPage) {
      pageInfo.value.list = result.data.list
    } else {
      pageInfo.value.list = [...pageInfo.value.list, ...result.data.list]
    }
    // 由于后端total返回的是long返回前端时为了精度不丢失，会转为string类型返回到前端
    pageInfo.value.total = parseInt(`${result.data.total}`)
    pageInfo.value.currentPage++
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped lang="scss">
.page {
  position: fixed;
  inset: 0;
  padding-top: 15rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;

  .rol {
    padding: 15rpx 0;
    width: 100%;

    .list-bottom {
      $list-bottom-height: 95rpx;

      display: flex;
      justify-content: center;
      width: 100%;
      height: $list-bottom-height;

      .loading,
      .no-more,
      .empty-collect {
        $list-bottom-content-height: $list-bottom-height * 0.7;

        display: flex;
        align-items: center;
        font-size: 31rpx;
        color: #999;

        .image {
          margin-right: 10rpx;
          width: $list-bottom-content-height;
          height: $list-bottom-content-height;
        }
      }
    }
  }
}
</style>
